<script setup>
defineOptions({
    name: "management"
});
import { ref } from "vue";
import {
    getListTaxSourcesRole,
    getLnvoiceOrderState,
    getLnvoiceOrderList,
    getListMerchantName,
    getInfoDetails,
    getListDtlAgente
} from "@/api/merchant";
import { formatDateTime } from '@/utils'

const size = ref("default");
const background = ref(false);
const disabled = ref(false);
const pageTotal = ref(0);
const currentPage = ref(1);
const loading = ref(false);
const drawer = ref(false);
const drawerInfo = ref({})

const loadingTable = ref(false)

const amountOptionValue = ref('')
const amountOptionOptions = ref([])
const pickerValue = ref("");
const inputMerchant = ref("");


const invoiceOrderStateOptions = ref([]);
const invoiceOrderStateOptionsVal = ref("");

const serviceCompany = ref([])
const serviceCompanyVal = ref('')

const tablePageSize = ref(10)

const handleSizeChange = (val) => {
    currentPage.value = 1
    tablePageSize.value = val
    getListTableData({ pageNum: 1 });
};

const handleCurrentChange = (val) => {
    getListTableData({ pageNum: val });
};
const tableData = ref([]);
getPageTableData();
function getPageTableData() {
    getListTaxSourcesRole().then((res) => {
        serviceCompany.value = res.data.rows;
    });
}
getLnvoiceOrderState().then((res) => {
    invoiceOrderStateOptions.value = res.data;
});
getListTableData();
function getListTableData(params) {
    const [start, end] = getPickerTime()
    const _params = {
        pageNum: 1,
        pageSize: tablePageSize.value,
        createTimeStart: start,
        createTimeEnd: end,
        total: 0,
        ...params
    };

    if (amountOptionValue.value !== '') {
        _params.isInvoicingAmount = amountOptionValue.value
    }
    if (inputMerchant.value !=='') {
        _params.merchantsName = inputMerchant.value
    }
    if (invoiceOrderStateOptionsVal.value !=='') {
        _params.invoiceOrderState = invoiceOrderStateOptionsVal.value
    }
    if (serviceCompanyVal.value !== '') {
        _params.taxSourcesId = serviceCompanyVal.value
        _params.total = 19
    }
    loadingTable.value = false
    getLnvoiceOrderList({ ..._params }).then((res) => {
        tableData.value = res.rows;
        pageTotal.value = res.total
    }).finally(() =>{
        loadingTable.value = false
    });
}
// 输入选择商户的时候
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        getListMerchantName({ merchantsName: query }).then((res) => {
            amountOptionOptions.value = res.rows
        }).finally(() => {
            loading.value = false
        })
    }
}
const amountSelectChange = () =>{
    getListTableData()
}
const pickerChange = () => {
    getListTableData({
        total: 6
    })
}
function getPickerTime() {
    const [startTime, endTime] = pickerValue.value
    const start = new Date(startTime)
    const end = new Date(endTime)
    return startTime ? [formatDateTime(start), formatDateTime(end)] : ''
}

// 重置页面
const onReset = () => {
    pickerValue.value = ''
    amountOptionValue.value = ''
    inputMerchant.value = ''
    serviceCompanyVal.value = ''
    pageTotal.value = 0
    currentPage.value = 1
    tablePageSize.value = 10
    getListTableData();
}

const getItemDetails = (id) => {
    getInfoDetails(id).then((res) => {
        drawerInfo.value = res.data
        drawer.value = true
    })
}

// 获取select数据
getListDtlAgente({ type: 1 }).then((res) => {
    serviceCompany.value = res.rows
})
</script>
<template>
    <div class="c-page">
        <div class="c-page__search">
            <div class="block">
                <el-select remote reserve-keyword @change="amountSelectChange"  filterable :loading="loading" v-model="inputMerchant"
                    :remote-method="remoteMethod" size="large" placeholder="请输入选择商户">
                    <el-option v-for="item in amountOptionOptions" :key="item.id" :label="item.merchantsName"
                        :value="item.merchantsName" />
                </el-select>
            </div>
            <div class="select">
                <el-select size="large" @change="getListTableData" v-model="serviceCompanyVal" placeholder="请选择服务公司">
                    <el-option v-for="item in serviceCompany" :key="item.taxSourcesId" :label="item.taxSourcesName"
                        :value="item.taxSourcesId">
                    </el-option>
                </el-select>
            </div>
            <div class="select">
                <el-select size="large" v-model="invoiceOrderStateOptionsVal" placeholder="请选择开票状态">
                    <el-option v-for="item in invoiceOrderStateOptions" :key="item.code" :label="item.desc"
                        :value="item.code">
                    </el-option>
                </el-select>
            </div>
            <div class="time zd">
                <el-date-picker @change="pickerChange" v-model="pickerValue" size="large" type="daterange" range-separator="-"
                    start-placeholder="开始时间" end-placeholder="结束时间">
                </el-date-picker>
            </div>
            <div class="search-btn">
                <el-button @click="onReset" size="large">重置</el-button>
                <el-button @click="getListTableData" type="primary" size="large">查询</el-button>
            </div>
        </div>
        <div class="c-page__bg">
            <div class="el-table__header-wrapper">
                <el-table :data="tableData" v-loading="loadingTable">
                    <el-table-column width="180" label="开票编号" prop="invoiceOrderNumber"></el-table-column>
                    <el-table-column width="180" label="商户名称" prop="merchantsInfoIdDisplay"></el-table-column>
                    <el-table-column width="180" label="服务公司名称" prop="taxSourcesIdDisplay"></el-table-column>
                    <el-table-column width="180" label="开票金额(元)" prop="amountOfApply"></el-table-column>
                    <el-table-column width="180" label="开票类目" prop="categoryOfInvoice"></el-table-column>
                    <el-table-column width="180" label="申请时间" prop="createTime"></el-table-column>
                    <el-table-column width="180" label="开票时间" prop="updateTime"></el-table-column>
                    <el-table-column fixed="right" label="开票状态"
                        prop="invoiceOrderStateDisplay"></el-table-column>
                    <el-table-column width="120" fixed="right" #default="{ row }" label="操作">
                        <span @click="getItemDetails(row.id)" class="c-text-primary">查看开票</span>
                    </el-table-column>
                </el-table>
                <div class="pagination-block">
                    <el-pagination v-model:current-page="currentPage" :page-size="tablePageSize" :page-sizes="[10,20,30]" :size="size" :disabled="disabled"
                        :background="background" layout="total, sizes, prev, pager, next" :total="pageTotal"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
            <el-drawer v-model="drawer" title="查看" size="40%">
                <el-form class="c-drawer-form">
                    <el-form-item label="申请开票金额">{{ drawerInfo.amountOfApply }}</el-form-item>
                    <el-form-item label="预开金额">{{ drawerInfo.amountOfPre }}</el-form-item>
                    <el-form-item label="开票类型">{{ drawerInfo.invoiceBatchTotalDisplay }}</el-form-item>
                    <div class="c-info__title">开票信息</div>
                    <el-form-item label="企业名称">{{ drawerInfo.merchantsName }}</el-form-item>
                    <el-form-item label="纳税人识别号">{{ drawerInfo.enterpriseIdNumber }}</el-form-item>
                    <el-form-item label="企业注册地址">{{ drawerInfo.enterpriseRegistrationAddress }}</el-form-item>
                    <el-form-item label="单位电话">{{ drawerInfo.contactNumber }}</el-form-item>
                    <el-form-item label="发票类型">{{ drawerInfo.invoiceTypeDisplay }}</el-form-item>
                    <el-form-item label="开票类目">{{ drawerInfo.categoryOfInvoice }}</el-form-item>
                    <el-form-item label="发票备注栏">{{ drawerInfo.remark }}</el-form-item>
                    <div class="c-info__title">邮寄地址</div>
                    <el-form-item label="收货地址">{{ drawerInfo.shippingAddress }}</el-form-item>
                    <el-form-item label="收件人姓名">{{ drawerInfo.nameOfRecipient }}</el-form-item>
                    <el-form-item label="联系电话">{{ drawerInfo.workTelephone }}</el-form-item>
                    <el-form-item label="电子邮箱">{{ drawerInfo.email }}</el-form-item>
                    <div class="c-info__title">其它</div>
                    <el-form-item label="开票状态">{{ drawerInfo.invoiceOrderStateDisplay }}</el-form-item>
                    <el-form-item label="查看发票">-</el-form-item>

                </el-form>
            </el-drawer>
        </div>
    </div>
</template>
<style scoped lang="scss">
.block,
.select {
    padding-bottom: 15px;
    padding-right: 30px;
    width: 18%;
}

.time {
    padding-bottom: 15px;
    padding-right: 30px;
}

.c-page__bg {
    display: flex;
    width: 100%;
    height: 100%;
    padding-bottom: 24px;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.c-dot-success,
.c-dot-info {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #43bf0a;
}

.flex-row {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #262626;
}

.c-dot-info {
    background-color: #bfbfbf;
}

.pagination-block {
    padding-top: 20px;
    padding-right: 10px;
    display: flex;
    justify-content: flex-end;
}

.c-text-primary {
    font-size: 14px;
    color: #1c9fff;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}

.el-table__header-wrapper {
    width: 100%;
    overflow: hidden;
}

.c-page {
    ::v-deep .el-form-item__label {
        margin-right: 20px;
        width: 120px;
        flex-shrink: 0;
        text-align: right;
        color: #8c8c8c;
        font-weight: normal;
    }

    ::v-deep .el-form-item {
        margin-bottom: 0;
    }

    .c-info__title {
        margin-top: 20px;
        margin-bottom: 20px;
        color: #262626;
        font-size: 14px;
    }
}
</style>
